<!DOCTYPE html>
<html>
	<head>
		<title><?php echo lang('site_title');?></title>
		<meta name="viewport" content="initial-scale=1.0">
		<meta charset="utf-8">

		<link type="text/css" href="<?php echo base_url();?>static/css/google_map.css" />

		<!-- Places 服务是一个独立于主 Maps JavaScript API 代码的自包含内容库。要使用此库中包含的功能，必须先在 Maps API bootstrap URL 中使用 libraries 参数加载该库。 -->
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=<?php echo $google_ak;?>&libraries=places&callback=googleMap.processor"></script>

	</head>
	<body>
		<h1><?php echo $title; ?></h1>


		<div class="mapContainer" style="height:400px;"></div>

		<script type="text/javascript">

			var googleMap = {};
			googleMap.mapHandle = null;
			googleMap.container = document.getElementsByClassName("mapContainer")[0];
			googleMap.points = {
				init: {lat: -34.397, lng: 150.644},
				nearbySearch: {lat: -33.867, lng: 151.195},
				textSearch: {lat: -33.8665433, lng: 151.1956316},
				radarSearch: {lat: -33.867, lng: 151.206},
				
			};
			googleMap.options = {
				init: {
					center: googleMap.points.init,
					zoom: 6
				},
				nearbySearch: {
					center: googleMap.points.nearbySearch,
					zoom: 15
				},
				radarSearch: {
					center: googleMap.points.radarSearch,
					zoom: 15,
					styles: [{
						stylers: [{ visibility: 'simplified' }]
					}, {
						elementType: 'labels',
						stylers: [{ visibility: 'off' }]
					}]
				},

			};

			googleMap.processor = function() {
				this.init();
				this.nearbySearch();
				this.textSearch();
				this.radarSearch();
			};

			googleMap.init = function() {
				this.mapHandle = new google.maps.Map(this.container, this.options.nearbySearch);
				this.infoWindow = new google.maps.InfoWindow();

				return this;
			};

			googleMap.marker = function() {
				var marker = new google.maps.Marker({
					position: this.points.marker,
					map: this.mapHandle
				});

				return this;
			};

			googleMap.createMarker = function(place) {
				var placeLoc = place.geometry.location;
				var marker = new google.maps.Marker({
					map: this.mapHandle,
					position: place.geometry.location
				});
				console.log(place.name);

				google.maps.event.addListener(marker, "click", function() {
					console.log(place);
					googleMap.infoWindow.setContent(place.name);
					googleMap.infoWindow.open(googleMap.mapHandle, this);
				});
			};

			// 附近地点搜索请求 - 通过附近地点搜索，您可以根据关键词或类型来搜索指定区域内的地点。
			googleMap.nearbySearch = function() {
				var service = new google.maps.places.PlacesService(this.mapHandle);
				var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);
				var request = {
					location: pyrmont,
					radius: '500',
					types: ['store']
				};
				var callback = function callback(results, status) {
					if (status == google.maps.places.PlacesServiceStatus.OK) {
						for (var i = 0; i < results.length; i++) {
							var place = results[i];
							googleMap.createMarker(results[i]);
						}
					}
				};
				
				service.nearbySearch(request, callback);
				
				return this;
			};

			// 文本搜索请求 - Google 地点文本搜索服务是一项 Web 服务，可以根据一个字符串（例如，“pizza in New York”或“shoe stores near Ottawa”）返回一组地点的相关信息。
			googleMap.textSearch = function() {
				var service = new google.maps.places.PlacesService(this.mapHandle);
				var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);
				var request = {
					location: pyrmont,
					radius: '500',
					query: 'restaurant'
				};
				var callback = function callback(results, status) {
					if (status == google.maps.places.PlacesServiceStatus.OK) {
						for (var i = 0; i < results.length; i++) {
							var place = results[i];
							googleMap.createMarker(results[i]);
						}
					}
				};
				
				service.textSearch(request, callback);
				
				return this;
			};

			// 雷达搜索请求 - 通过雷达搜索，您可以根据关键词、类型或名称来搜索指定搜索半径范围内的地点。
			// 雷达搜索返回的结果比附近地点搜索或文本搜索要多，但结果中包含的字段要少一些。您可以调用 PlacesService.getDetails() 来获取有关响应中任何地点的详细信息。
			googleMap.radarSearch = function() {
				this.mapHandle.setOptions(this.options.radarSearch);

				var service = new google.maps.places.PlacesService(this.mapHandle);
				
				var performSearch = function performSearch() {
					var request = {
						bounds: googleMap.mapHandle.getBounds(),
						keyword: "best view"
					};
					console.log("callback 正常！：", callback);
					service.radarSearch(request, callback);
				};

				// The idle event is a debounced event, so we can query & listen without
				// throwing too many requests at the server.
				this.mapHandle.addListener("idle", performSearch);

				// var performSearch = function() {} 定义形式要放到前面，要不然会报错，卧槽! 销三观了!!
				// Uncaught TypeError: Cannot read property 'apply' of undefined
				// 或者 直接 function performSearch(){} 或者 放前面！
				// var performSearch = function performSearch() {
				// 	var request = {
				// 		bounds: googleMap.mapHandle.getBounds(),
				// 		keyword: "best view"
				// 	};
				// 	alert(request);
				// 	service.radarSearch(request, callback);
				// };

				var callback = function(results, status) {
					
					// if (status == google.maps.places.PlacesServiceStatus.OK) {
					// 	for (var i = 0; i < results.length; i++) {
					// 		var place = results[i];
					// 		googleMap.createMarker(results[i]);
					// 	}
					// }
					
					if (status !== google.maps.places.PlacesServiceStatus.OK) {
						console.error(status);
						return;
					}
					for (var i = 0, result; result = results[i]; i++) {
						addMarker(result);
					}
				};
				


				var addMarker = function(place) {
				  var marker = new google.maps.Marker({
				    map: googleMap.mapHandle,
				    position: place.geometry.location,
				    icon: {
				      url: "https://developers.google.com/maps/documentation/javascript/images/circle.png",
				      anchor: new google.maps.Point(10, 10),
				      scaledSize: new google.maps.Size(10, 17)
				    }
				  });

				  google.maps.event.addListener(marker, "click", function() {
				    service.getDetails(place, function(result, status) {
				    	console.log(place);
				      if (status !== google.maps.places.PlacesServiceStatus.OK) {
				        console.error(status);
				        return;
				      }
				      googleMap.infoWindow.setContent(result.name);
				      googleMap.infoWindow.open(googleMap.mapHandle, marker);
				    });
				  });
				};
				
				
				return this;
			};

			// https://developers.google.com/maps/documentation/javascript/places
			// 搜索响应
			// 状态代码 - PlacesServiceStatus 响应对象包含了请求的状态，还可能包含调试信息，以帮助您跟踪地点请求失败的原因。
			// 地点搜索结果 - nearbySearch() 和 textSearch() 函数均返回一个 PlaceResult 对象的数组。
			// 访问其他结果 - 默认情况下，对于每个地点搜索，每次查询可返回最多 20 条结果。但是，每个搜索可以返回多达 60 条结果，分三页显示。可以通过 PlaceSearchPagination 对象获取其他页面。
			
			// 地点详情
			// 地点详情请求 - 通过调用该服务的 getDetails() 方法可请求地点详情。
			// https://developers.google.com/maps/documentation/javascript/examples/place-details
			// 
			// 通过地点 ID 引用地点 - Google 地图上的地点可以通过其地点 ID 唯一地引用。地点 ID 可用于大多数位置，包括商家、地标、公园和十字路口。这些 ID 是稳定的，这意味着一旦您确定了某个位置的地点 ID，就可以在下次查找该位置时重复使用该值。
			// 地点照片 - 地点照片功能允许您将高品质照片内容添加到您的站点。照片服务可以让您访问 Places 和 Google+ Local 数据库中存储的数以百万计的照片。
			


		</script>






	</body>
</html>
